<template>
  <div>
  <el-button type="primary" style="float: right" @click="add">添加卷子</el-button>
  <el-button type="primary" style="float: left" @click="del">删除卷子</el-button>
  <el-table
      ref="filterTable"
      :data="tableData"
      border
      style="width: 100%"
      @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55"
    >
    </el-table-column>
    <el-table-column
        prop="qid"
        label="题目编号">
    </el-table-column>
    <el-table-column
        prop="question"
        label="题目">
        <template slot-scope="scope">
      <span class="aa">
          {{scope.row.question}}
      </span>
        </template>
    </el-table-column>

    <el-table-column
        prop="optionA"
        label="A选项">
    </el-table-column>

    <el-table-column
        prop="optionB"
        label="B选项">
    </el-table-column>

    <el-table-column
        prop="optionC"
        label="C选项">
    </el-table-column>

    <el-table-column
        prop="optionD"
        label="D选项">
    </el-table-column>

    <el-table-column
        prop="answer"
        label="答案">
      <template slot-scope="a">
        <el-tag v-if="a.row.answer=='A'">{{a.row.answer}}</el-tag>
        <el-tag type="success" v-if="a.row.answer=='B'">{{a.row.answer}}</el-tag>
        <el-tag type="warning" v-if="a.row.answer=='C'">{{a.row.answer}}</el-tag>
        <el-tag type="danger" v-if="a.row.answer=='D'">{{a.row.answer}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column
        prop="status"
        label="状态">
    </el-table-column>

  </el-table>
  </div>
</template>

<script>
import {getRequest} from "@/utils/api";
import axios from "axios";

export default {
  name: "show",
  data(){
    return{
      tableData:[],
      multipleSelection:[]
    }
  },
  methods:{
    handleSelectionChange(val){
      this.multipleSelection=val
    },
    del(){
      var arr=''
      for(var i in this.multipleSelection){
        arr+=this.multipleSelection[i].qid+','
      }
      console.log(arr)
      if(confirm("确定要删除"+this.multipleSelection.length+"条题目吗？")){
      axios.delete("/question/del?arr="+arr).then(xxx=>{
        if(xxx.data.flag){
          this.$message.success("成功删除"+this.multipleSelection.length+"条题目")
          this.findAll()
        }
      })
      }
    },
    add(){
      this.$router.push("/addque")
    },
    findAll(){
      getRequest("/question/questions").then(resp =>{
        this.tableData=resp.data.data;
      })
    },
  },
  created() {
    this.findAll()
  }
}
</script>

<style scoped>
.aa{
  background: cyan;
  color: red;
}
</style>